<script setup>
import {ref,computed} from 'vue'
import ComAffix from "@/components/ComAffix.vue";
import PostItem from "@/components/PostItem.vue";
import router from '@/router/index.js'
import {getOtherUserPost} from "@/api/post.js";
import {userGetUserInfoService} from "@/api/user.js";
const route = computed(() => router.currentRoute.value);
const userId = route.value.query.userId


const posts = ref([
])

const getPosts = async () => {
  const res = await getOtherUserPost(userId)
  posts.value = res.data.data
}
getPosts()
const userInfo = ref({
  id: userId,
  avatar: "https://chen-qingyun-novelforum.oss-cn-hangzhou.aliyuncs.com/user/avatar100001.jpg",
  collects : 14,
  fans: 14,
  followee: 2,
  introduced: "西风吹老洞庭波，一夜湘君白发多。醉后不知天在水，满船清梦压星河。",
  likes: 30,
  nickname: "惊鸿照影",
  phone: "15879224140",
  postCount: 4,
})
const getUser = async () => {
  const res = await userGetUserInfoService(Number(userId))
  userInfo.value = res.data.data
}
getUser()

// 处理点赞
const handleLike = ({id, liked}) => {
  const post = posts.value.find(p => p.id === id)
  if (post) {
    post.likes += liked ? 1 : -1
    post.liked = liked
  }
}

// 切换展开状态
const toggleExpand = (postId) => {
  const post = posts.value.find(p => p.id === postId)
  if (post) post.expanded = !post.expanded
}
</script>

<template>
  <div class="main">
    <el-affix :offset="0">
      <ComAffix></ComAffix>
    </el-affix>

    <div class="content-container">
      <!-- 用户信息模块 -->
      <div class="user-info">
        <div class="avatar-container">
          <el-avatar :size="120" :src="userInfo.avatar" />
        </div>
        <div class="user-details">
          <div class="name-section">
            <h1 class="nickname">{{ userInfo.nickname }}</h1>
            <span class="user-id">ID: {{ userInfo.id }}</span>
          </div>

          <!-- 数据统计 -->
          <div class="stats-grid">
            <div class="stat-label">
              <span>关注</span>
              <span>粉丝</span>
              <span>收藏</span>
              <span>获赞</span>
            </div>
            <div class="stat-value">
              <span>{{ userInfo.followee }}</span>
              <span>{{ userInfo.fans }}</span>
              <span>{{ userInfo.collects }}</span>
              <span>{{ userInfo.likes }}</span>
            </div>
          </div>

          <!-- 简介 -->
          <div class="bio-section">
            <h3 style="font-size: 15px">个人简介</h3>
            <p class="bio-content">{{ userInfo.introduced }}</p>
          </div>
        </div>
      </div>

      <!-- 帖子内容 -->
      <div class="posts">
        <PostItem
          v-for="post in posts"
          :key="post.id"
          :post="post"
          @like="handleLike"
          @toggle-expand="toggleExpand"
        />
      </div>
    </div>

    <!-- 右侧固定操作栏 -->
    <div class="action-sidebar">
      <span>关注</span>
      <router-link
        :to="{
          name: 'Message',
          query: { receiverId: userInfo.id }  // 假设 user.id 是目标用户ID
        }"
      >
        发送私信
      </router-link>
      <span>收藏</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  background-color: #f6f3f3;
  min-height: 100vh;
  position: relative;
}

.content-container {
  width: 700px;
  margin-left: 150px;
  padding: 20px;

  .user-info {
    background: linear-gradient(135deg, #81badc, #fddcdc);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

    .avatar-container {
      flex-shrink: 0;
    }

    .user-details {
      flex-grow: 1;

      .name-section {
        margin-bottom: 25px;

        .nickname {
          font-size: 28px;
          margin: 0 15px 0 0;
          display: inline-block;
        }

        .user-id {
          color: #666;
          font-size: 14px;
        }
      }

      .stats-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
        .stat-label span{
          color: #909399;
          font-size: 15px;
          margin: 0 15px;
        }

        .stat-value span{
          display: inline-block;
          width: 60px;
          text-align: center;

          font-size: 18px;
          font-weight: 600;
          color: #303133;

        }
      }

      .bio-section {
        h3 {
          color: #303133;
          margin: 0 0 10px 0;
          font-size: 16px;
        }

        .bio-content {
          color: #606266;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

.action-sidebar {
  position: fixed;
  right: 90px;
  top: 180px;
  width: 150px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  span {
    display: block;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
